<template>
	<view class="root">
		<view class="header animate__animated animate__slideInDown">
			<view class="left">
				<up-image
					:src="config.http_host + userInfo.imageUrl"
					width="152rpx"
					shape="circle"
					height="152rpx"
					style="border: 6rpx solid #fff; border-radius: 50%;"
					mode="scaleToFill"></up-image>
				<view class="name">
					<text>{{userInfo.nickName || '默认用户'}}</text>
				</view>
			</view>
			<view class="time">
				<text>{{userInfo.registerDate}}</text>
			</view>
		</view>
		<view class="title animate__animated animate__slideInLeft">
			<text>早上好，用户昵称</text>
		</view>
		<view class="tips animate__animated animate__slideInRight">
			<text>快开始第一次保护眼睛吧</text>
		</view>
		<view class="card animate__animated animate__fadeInUp" @click="jump">
			<view class="left">
				<view class="line">
					<text>告诉我您的眼睛状况</text>
				</view>
				<view class="line">
					<text>为您量身定做专属课程</text>
				</view>
			</view>
			<view class="icon">
				<view class="arrow"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref, onMounted
	} from "vue";
	import config from '@/config/index.js'
	import {
		checkLogin,
		getUserInfoApi
	} from '@/api/index.js'

	//  获取用户基础信息
	const userInfo = ref({
		imageUrl: '',
		registerDate: '',
		nickName: ''
	})
	const getUserInfo = () => {
		getUserInfoApi().then(res => {
			if(res.code === 200) {
				userInfo.value = res.data
			}
		})
	}

	const jump = () => {
		uni.navigateTo({
			url: '/pages/form/index'
		})
	}
	
	
	onMounted(() => {
		getUserInfo()
	})
	
</script>

<style lang="less" scoped>
	.root {
		height: 100vh;
		background-color: #fff;
		overflow: hidden;

		.header {
			padding: 68rpx 63rpx 40rpx 53rpx;
			background-color: #0A9647;
			border-radius: 0 0 56rpx 56rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				column-gap: 26rpx;

				image {
					min-width: 152rpx;
					max-width: 152rpx;
					width: 152rpx;
					height: 152rpx;
					border-radius: 50%;
					border: 4rpx solid #fff;
				}

				.name {
					width: 200rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 42rpx;
					color: #FFFFFF;
					line-height: 58rpx;
					letter-spacing: 4rpx;
				}
			}

			.time {
				font-family: DINCondensed, DINCondensed;
				font-weight: bold;
				font-size: 42rpx;
				color: #FFFFFF;
				line-height: 51rpx;
			}
		}

		.title {
			margin-top: 135rpx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 56rpx;
			color: #000000;
			letter-spacing: 4rpx;
		}

		.tips {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: rgba(0, 0, 0, 0.5);
			text-align: center;
			margin-top: 18rpx;
		}

		.card {
			width: 624rpx;
			background: #27A25C;
			border-radius: 37rpx;
			margin: 47rpx auto;
			padding: 42rpx 42rpx 40rpx 44rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.left {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 25rpx;
				color: #FFFFFF;
				text-align: center;
				letter-spacing: 2rpx;
				line-height: 35rpx;
			}

			.icon {
				width: 72rpx;
				height: 2rpx;
				background-color: #fff;
				position: relative;

				.arrow {
					width: 16rpx;
					height: 16rpx;
					background: linear-gradient(45deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%);
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					margin: auto 0;
					transform: rotateZ(45deg);
				}
			}
		}
	}
</style>